<template>

	<div class="w-full flex flex-wrap bg-gray-50 p-2 mb-4" v-if="lookup.length != 0">
		<span v-for="(item, key) in lookup" class="basis-1/3 w-full flex mt-4">
			<span class="leading-8">{{ item.title }}:</span>
			<span class="w-80 ml-2">
				<el-input v-if="item.type == 'input'" v-model="item.value" class="inline-input w-full"
					:placeholder="$t('message.pleaseEnter')" clearable />

				<el-select v-prmis="'category_list'" v-if="item.type == 'prmis'" v-model="item.value" class="inline-input w-full"
					:placeholder="$t('message.pleaseSelect')" @change="changeSelect(item)" clearable filterable>
					<el-option v-for="item in item.select" :key="item.value" :label="item.key === 'template_type' ? $t(item.label):$t(item.label)" :value="item.value" />
				</el-select>

				<el-select v-if="item.type == 'define'" v-model="item.value" class="inline-input w-full"
					:placeholder="$t('message.pleaseSelect')" @change="changeSelect(item)" clearable filterable>
					<el-option v-for="item in item.select" :key="item.value" :label="item.key === 'template_type' ? $t(item.label):$t(item.label)" :value="item.value" />
				</el-select>
				<el-select v-if="item.type == 'defineShop'" v-model="item.value" class="inline-input w-full"
					:placeholder="$t('message.pleaseSelect')" @change="changeSelect(item)" clearable filterable>
					<el-option v-for="item in item.select" :key="item.g_id" :label="item.g_id + '-' + item.g_name"
						:value="item.g_id" />
				</el-select>

				<el-select v-if="item.type == 'machine'" v-model="item.value" class="inline-input w-full"
					:placeholder="$t('message.pleaseSelect')" clearable filterable>
					<el-option v-for="item in data.machine" :key="item.m_id"
						:label="item.m_id + ' - ' + item.machine_id + ' (' + item.machine_name + ')'"
						:value="item.machine_id" />
				</el-select>
				<el-select v-if="item.type == 'mId'" v-model="item.value" class="inline-input w-full"
					:placeholder="$t('message.pleaseSelect')" clearable filterable>
					<el-option v-for="item in data.machine" :key="item.m_id"
						:label="item.m_id + ' - ' + item.machine_id + ' (' + item.machine_name + ')'" :value="item.m_id" />
				</el-select>
				<el-select v-if="item.type == 'machineName'" v-model="item.value" class="inline-input w-full"
					:placeholder="$t('message.pleaseSelect')" clearable filterable>
					<el-option v-for="item in data.machine" :key="item.m_id"
						:label="item.m_id + ' - ' + ' (' + item.machine_name + ')'" :value="item.machine_name" />
				</el-select>
				<el-cascader class="inline-input w-full" v-if="item.type == 'linkages'" :props="item.props" v-model="item.value" />
				<el-cascader class="inline-input w-full" v-if="item.type == 'linkage'" v-model="item.value"
					:options="item.select" :show-all-levels="item.levels" :props="{ 'checkStrictly': item.strictly }"
					filterable :value="item.value" />

				<div class="inline-input w-full">
					<el-date-picker v-if="item.type == 'time'" v-model="item.value" type="daterange"
						:range-separator="$t('public.to')" :start-placeholder="$t('date.startDate')"
						:end-placeholder="$t('date.endDate')" value-format="YYYY-MM-DD" style="width: 100%;"
						:shortcuts="shortcuts" />
				</div>
				<div class="inline-input w-full">
					<el-date-picker v-if="item.type == 'times'" v-model="item.value" type="datetimerange"
						:range-separator="$t('public.to')" :start-placeholder="$t('date.startDate')"
						:end-placeholder="$t('date.endDate')" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"
						:shortcuts="shortcuts" />
				</div>

				<div class="inline-input w-full">
					<el-date-picker v-if="item.type == 'picker'" v-model="item.value" style="width:100%;" type="date"
						:placeholder="$t('message.pleaseSelect')" value-format="YYYY-MM-DD" :shortcuts="shortcuts" />
				</div>
			</span>
		</span>

		<div class="w-full text-right mt-4">
			<el-button type="primary" size="small" @click="have">
				<template #default>
					<span class="text-sm">{{ $t('public.search') }}</span>
				</template>
			</el-button>
			<el-button size="small" @click="cancellation">
				<template #default>
					<span class="text-sm">{{ $t('public.reset') }}</span>
				</template>
			</el-button>
		</div>

	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { getmachineList } from '@/api/machine';

let emit = defineEmits(['investigate', 'changeSelect'])
/**
  * 查询类型
	* 输入框 input
	* 自定义下拉框 define
	* 设备选择 machine
	* 日期选择 time
	* 单日期选择 picker
	* 层级下拉框 linkage {
		* 以下为可选项
		* levels: false/true 是否只显示最后一级 默认true
		* strictly: false/true 是否允许选择任意一级 默认false
	}
	* 
	* 传参格式
	* {title:'显示名称',type:'查询类型',value:'返回值',key:$t('manage.performance.fieldName')}
	* {title:'设备名称',type:'input',value:'',key:'machine'}
	* 
	* */
let props = defineProps({
	lookup: {
		type: Array,
		default: []
	},
	date: {
		type: Array,
		default: []
	}
})
let shortcuts = [
	{
		text: $t('public.sevenDays'),
		value: () => {
			const start = new Date();
			const end = new Date();

			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		}
	},
	{
		text: $t('public.thirtyDays'),
		value: () => {
			const start = new Date();
			const end = new Date();

			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		}
	},
	{
		text: $t('public.threeMonths'),
		value: () => {
			const start = new Date();
			const end = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		}
	}
];

let data = reactive({
	machine: [],
	highlight: ''
})

let changeSelect = (item) => {
	if (!item.change) {
		return
	}
	emit('changeSelect', item)
}
// 获取是否需要调用接口
let getloup = () => {
	for (let item of props.lookup) {
		if (item.type == 'machine' || item.type == 'mId') {
			data.machine = []
			getmachineList().then(res => {
				if (res.state == 200) {
					data.machine = res.data
				}
			})
		}
	}
}
document.addEventListener("keydown", function (event) {
	// 判断按下的键是否是回车键（键码为13）
	if (event.keyCode === 13) {
		// 执行相应的操作，例如提交表单或执行搜索功能
		let obj = {}
		for (let item of props.lookup) {
			obj[item.key] = item.value || ''
		}
		emit('investigate', obj)
		// 在这里可以添加具体的逻辑代码
	}


});

let have = () => {
	let obj = {}
	for (let item of props.lookup) {
		obj[item.key] = item.value || ''
	}
	emit('investigate', obj)
}

let cancellation = () => {
	let obj = {}
	for (let key in props.lookup) {
		props.lookup[key].value = ''
		obj[props.lookup[key].key] = ''
	}
	emit('investigate', obj)
}
getloup()

</script>
